import React from "react";
import { Popover, Popconfirm, Badge } from 'antd';
import { messages } from "share/common";
import SelectByBtn from "components/template/select-by-btn";
import 'styles/data-center/report-distribution/grant-range-selector.scss';
import ResizeTable from 'components/resize-table';

const { PropTypes, Component } = React;

class GrantRangeSelector extends Component {

  PopoverWrapper = value => <Popover placement="topLeft" content={value || '-'}>{value || '-'}</Popover>;
  columnsEditor = (value, record) => {
    return (
      <Popconfirm
        onConfirm={() => this.deleteSelectedGrant(record)}
        title={messages('common.confirm.delete')/*确定要删除吗？*/}>
        <a onClick={e => {
          e.preventDefault();
          e.stopPropagation()
        }}>
          {messages('common.delete')/*删除*/}
        </a>
      </Popconfirm>
    )
  };

  state = {
    loading: false,
    data: [],
    pagination: {
      total: 0,
      current: 1,
      page: 0,
      pageSize: 10,
    },
  }

  codeMap = {
    'user': {
      rowKey: 'id',
      selectorConfig: {
        type: 'user',
        title: messages('basic-10.key34')/*按条件添加员工*/,
        labelKey: 'fullName',
        valueKey: 'userOID'
      },
      columns: [
        {
          title: messages('common.user.id')/*工号*/,
          dataIndex: "employeeID",
          render: this.PopoverWrapper
        },
        {
          title: messages('basic-10.key35')/*姓名*/,
          dataIndex: "fullName",
          render: this.PopoverWrapper
        },
        {
          title: messages('basic-10.key36')/*公司名称*/,
          dataIndex: "companyName",
          render: this.PopoverWrapper
        },
        {
          title: messages('common.department')/*部门*/,
          dataIndex: "departmentName",
          render: this.PopoverWrapper
        },
        {
          title: messages('common.operation')/*操作*/,
          dataIndex: 'userOID',
          width: '15%',
          render: this.columnsEditor
        }
      ]
    },
    'userGroup': {
      rowKey: 'id',
      selectorConfig: {
        type: 'user_group',
        title: messages('basic-10.key37')/*添加人员组*/,
        labelKey: 'name',
        valueKey: 'id'
      },
      columns: [
        {
          title: messages('basic-10.key38')/*人员组编码*/,
          dataIndex: "code",
          render: this.PopoverWrapper
        },
        {
          title: messages('basic-10.key39')/*人员组名称*/,
          dataIndex: "name",
          render: this.PopoverWrapper
        },
        {
          title: messages('basic-10.key40')/*人员组描述*/,
          dataIndex: "comment",
          render: this.PopoverWrapper
        },
        {
          title: messages('common.operation')/*操作*/,
          dataIndex: 'id',
          width: '15%',
          render: this.columnsEditor
        }
      ]
    },
    'departmentRole': {
      rowKey: 'id',
      selectorConfig: {
        type: 'department_role',
        title: messages('basic-10.key41')/*添加部门角色*/,
        labelKey: 'positionName',
        valueKey: 'id'
      },
      columns: [
        {
          title: messages('basic-10.key42')/*部门角色编码*/,
          dataIndex: "positionCode",
          render: this.PopoverWrapper
        },
        {
          title: messages('basic-10.key43')/*部门角色名称*/,
          dataIndex: "positionName",
          render: this.PopoverWrapper
        },
        {
          title: messages('basic-10.key44')/*部门角色状态*/,
          dataIndex: "enabled",
          render: value => {
            return <Badge status={value ? 'success' : 'error'}
                          text={value ? messages('basic-10.key45')/*启用temp*/ : messages('basic-10.key46')/*禁用temp*/}/>
          }
        },
        {
          title: messages('common.operation')/*操作*/,
          dataIndex: 'id',
          width: '15%',
          render: this.columnsEditor
        }
      ]
    },
    'costCenterItemRole': {
      rowKey: 'id',
      selectorConfig: {
        type: 'cost-center_role',
        title: messages('basic-10.key192')/*指定成本中心角色*/,
        labelKey: 'positionName',
        valueKey: 'id',
        listExtraParams: {
          costCenterRole: true
        }
      },
      columns: [
        {
          title: messages('basic-10.key193')/*成本中心角色名称*/,
          dataIndex: "positionName",
          render: this.PopoverWrapper
        },
        {
          title: messages('basic-10.key194')/*成本中心角色编码*/,
          dataIndex: "positionCode",
          render: this.PopoverWrapper
        },
        {
          title: messages('common.column.status')/*状态*/,
          dataIndex: "enabled",
          render: value => {
            return <Badge status={value ? 'success' : 'error'}
                          text={value ? messages('basic-10.key45')/*启用temp*/ : messages('basic-10.key46')/*禁用temp*/}/>
          }
        },
        {
          title: messages('common.operation')/*操作*/,
          dataIndex: 'id',
          width: '15%',
          render: this.columnsEditor
        }
      ]
    },
    'userRole': {
      rowKey: 'id',
      selectorConfig: {
        type: 'user_role',
        title: messages('basic-10.key232')/*指定人员角色*/,
        labelKey: 'permissionName',
        valueKey: 'permissionCode'
      },
      columns: [
        {
          title: messages('basic-5.key4')/*角色名称*/,
          dataIndex: "permissionName",
          render: this.PopoverWrapper
        },
        {
          title: messages('basic-5.key19')/*角色编码*/,
          dataIndex: "permissionCode",
          render: this.PopoverWrapper
        },
        {
          title: messages('common.column.status')/*状态*/,
          dataIndex: "enabled",
          render: value => {
            return <Badge status={value ? 'success' : 'error'}
                          text={value ? messages('basic-10.key45')/*启用temp*/ : messages('basic-10.key46')/*禁用temp*/}/>
          }
        },
        {
          title: messages('common.operation')/*操作*/,
          dataIndex: 'id',
          width: '15%',
          render: this.columnsEditor
        }
      ]
    }
  }


  constructor(props) {
    super(props);
  }

  // componentDidMount() {
  //   if (this.props.grantCode in this.codeMap) {
  //   }
  // }
  //
  // componentWillReceiveProps(nextProps) {
  //   if (nextProps.grantCode !== this.props.grantCode && nextProps.grantCode in this.codeMap) {
  //   }
  // }


  //过滤重复数据后添加员工
  changeGrant = (result) => {
    result = result.map(item => item.value);
    this.props.onChangeSelected && this.props.onChangeSelected({
      result
    });
  };

  deleteSelectedGrant = (record) => {
    const { selectedGrantArray } = this.props;
    let existIndex;
    selectedGrantArray.find((item, index) => {
      return item.id === record.id && ((existIndex = index) || true)
    });
    if (existIndex !== undefined) {
      selectedGrantArray.splice(existIndex, 1);
    }
    this.props.onChangeSelected && this.props.onChangeSelected({
      result: selectedGrantArray
    });
  }


  render() {
    const { loading } = this.state;
    const { grantCode, selectedGrantArray, myTitle } = this.props;

    if (grantCode in this.codeMap) {
      const config = this.codeMap[grantCode] || {};
      const { selectorConfig = {}, columns, rowKey } = config;
      const { type, labelKey, valueKey, title, listExtraParams } = selectorConfig;

      return (
        <div className="grant-range-selector-wrap">
          <div>
            <div className="table-header">
              <div className="table-header-buttons">
                <div>
                  <span className="pull-left">
                    <SelectByBtn
                      type={type}
                      listExtraParams={listExtraParams}
                      title={myTitle || title}
                      labelKey={labelKey}
                      buttonType={"primary"}
                      valueKey={valueKey}
                      value={selectedGrantArray}
                      onConfirm={this.changeGrant}/>
                  </span>
                </div>
              </div>
            </div>
            <ResizeTable
              rowKey={rowKey}
              columns={columns}
              dataSource={selectedGrantArray}
              loading={loading}
              bordered
              className="clear"
              size="middle"
            />
          </div>
        </div>
      );
    } else {
      return <div></div>
    }
  }

  static propTypes = {
    grantCode: PropTypes.string,
    selectedGrantArray: PropTypes.array
  }
  static defaultProps = {
    selectedGrantArray: []
  }
}

export default GrantRangeSelector;

